<template>
  <view class="box">
    <view class="header">
      <text class="header-title-left">常用功能</text>
    </view>
    <view class="main">
      <view class="menu-item" v-for="(item, index) in menu" :key="index" @click="nav.jump(item.link)">
        <image class="w-50rpx h-50rpx" mode="aspectFit" :src="item.icon" />
        <text class="menu-text">{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { nav } from '@/utils/homer';
  import type { MenuData } from '@/types/menu';

  const menuCol = ref<number>(4);
  const menu = ref<MenuData[]>([
    {
      label: '商学院',
      icon: '/static/icon/img/tool/college.png',
      link: '/pages/college/index',
    },
    {
      label: '素材中心',
      icon: '/static/icon/img/tool/material.png',
      link: '/pages/material/index',
    },
    {
      label: '百问百答',
      icon: '/static/icon/img/tool/dialog.png',
      link: '/pages/dialog/index',
    },
    {
      label: '口碑种草',
      icon: '/static/icon/img/tool/praise.png',
      link: '/pages/praise/index',
    },
    {
      label: '品牌视频',
      icon: '/static/icon/img/tool/video.png',
      link: '/pages/video/index',
    },
  ]);
</script>

<style lang="scss" scoped>
  .box {
    background: white;
    margin: 10rpx 25rpx;
    padding: 30rpx;
    border-radius: 20rpx;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ebebeb;
      padding-bottom: 20rpx;

      .header-title-left {
        font-weight: 600;
        font-size: 28rpx;
      }
      .header-title-right {
        display: flex;
        align-items: center;
        font-size: 22rpx;
        color: #c2c2c2;
      }
    }

    .main {
      display: grid;
      grid-template-columns: repeat(v-bind(menuCol), minmax(0, 1fr));
      column-gap: 35rpx;
      row-gap: 30rpx;
      margin-top: 30rpx;

      .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .menu-icon {
          width: 60rpx;
          height: 60rpx;
        }

        .menu-text {
          margin-top: 15rpx;
          font-size: 25rpx;
        }
      }
    }
  }
</style>
